<template>
  <div class="page-bg">
    <el-divider></el-divider>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">所属项目</label>
      </div>
      <div class="weui-cell__bd cellMargin">
        <div class="weui_cell_bd weui_cell_primary">
          {{projectName}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">开始时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" v-model="startTime" disabled>
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">结束时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" v-model="endTime" disabled>
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">课题负责人</label>
      </div>
      <div class="weui-cell__bd cellMargin">
        <div class="weui_cell_bd weui_cell_primary">
          {{leaderName}}
        </div>
      </div>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">主要内容</label>
      </div>
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入课题主要内容"
        v-model="content"
        disabled
        clearable>
      </el-input>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">考核指标</label>
      </div>
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入课题考核指标"
        v-model="target"
        disabled
        clearable>
      </el-input>
    </div>
    <el-divider></el-divider>
    <div class="row">
      <svg class="icon addTaskIcon" aria-hidden="true" @click="handleAddMission">
        <use xlink:href="#iconicon_add"></use>
      </svg>
      <span class="v-center">
          <svg class="icon taskIcon" aria-hidden="true">
            <use xlink:href="#iconrenwu1"></use>
          </svg>
          任务安排
        </span>
    </div>
    <el-divider></el-divider>
    <div v-for="item of missionList" :key="item.id" >
      <div class="row">
          <span class="taskName">
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icondian3"></use>
            </svg>
            {{item.name}}
          </span>
        <span class="delIcon" >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconicon_signal"></use>
            </svg>
            {{item.ownerName}}
          </span>
      </div>
      <el-divider></el-divider>
    </div>
<!--    <div class="weui-btn-area">-->
<!--      <a href="javascript:;" class="weui-btn weui-btn_primary" @click="okTask=true">通过审核</a>-->
<!--    </div>-->
    <el-dialog title="新建任务" :visible.sync="addMission" width="90%">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">任务名称</label></div>
        <div class="weui-cell__bd ">
          <input class="weui-input" placeholder="请输入任务名称" type="name" v-model="mission.name">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">开始时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="mission.startTime">
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">结束时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="mission.endTime">
          </div>
        </div>
      </div>
      <div class="weui_cell weui_cell_select">
        <div class="weui_cell_bd weui_cell_primary">
          <select class="weui_select" v-model="mission.ownerID">
            <option value=-1>请选择任务负责人</option>
            <option v-for="data in studentList"
                    :key="data.id"
                    :value="data.id"
                    :label="data.name"></option>
          </select>
        </div>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">任务主要内容</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入任务主要内容"
          v-model="mission.content"
          clearable>
        </el-input>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">任务考核指标</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入任务考核指标"
          v-model="mission.target"
          clearable>
        </el-input>
      </div>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addMission = false">取 消</el-button>
        <el-button type="primary" @click="submitMission()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="okTask"
      width="70%">
      <span>确定提交《{{name}}》的审核吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="okTask = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'checkProjectDetailForm',
  data () {
    return {
      taskState: '',
      projectID: '',
      task: '',
      okTask: false,
      addMission: false,
      studentList: [],
      projectName: '',
      name: '',
      startTime: '',
      endTime: '',
      content: '',
      target: '',
      leaderName: '',
      mission: {
        name: '',
        moduleID: parseInt(sessionStorage.getItem('taskID')),
        startTime: '',
        endTime: '',
        ownerID: '',
        content: '',
        target: ''
      },
      missionList: [{
        name: '',
        moduleID: parseInt(sessionStorage.getItem('taskID')),
        startTime: '',
        endTime: '',
        ownerID: '',
        content: '',
        target: ''
      }]
    }
  },
  methods: {
    handleAddMission () {
      this.getStudentList()
      this.mission.name = ''
      this.mission.startTime = ''
      this.mission.endTime = ''
      this.mission.content = ''
      this.mission.target = ''
      this.mission.ownerID = -1
      this.addMission = true
    },
    getTask () {
      axios.get(this.url + '/module/id/' + sessionStorage.getItem('taskID'))
        .then(this.getTaskSucc)
    },
    getTaskSucc (res) {
      res = res.data
      if (res) {
        this.task = res
        this.name = res.name
        this.startTime = res.startTime
        this.endTime = res.endTime
        this.content = res.content
        this.target = res.target
        this.leaderName = res.leaderName
        this.projectName = res.projectName
        this.projectID = res.projectID
        this.getProjectState(res.projectID)
      }
    },
    getMissionList () {
      axios.get(this.url + '/mission/module/' + sessionStorage.getItem('taskID'))
        .then(this.getMissionListSucc)
    },
    getMissionListSucc (res) {
      res = res.data
      if (res) {
        this.missionList = res
      }
    },
    getStudentList () {
      axios.get(this.url + '/user/level/2')
        .then(this.getStudentListSucc)
    },
    getStudentListSucc (res) {
      console.log('getStudentListSucc')
      if (res.status === 200) {
        res = res.data
        this.studentList = res
        console.log(this.studentList)
      }
    },
    submitMission () {
      if (this.mission.ownerID === -1) {
        this.$notify.warning({
          title: '请选择任务负责人！'
        })
        return
      }
      if (this.mission.name === '') {
        this.$notify.warning({
          title: '请输入任务名称！'
        })
        return
      }
      if (this.mission.name.length > 10) {
        this.$notify.warning({
          title: '任务名称不能超过十个字！'
        })
        return
      }
      this.$axios({
        method: 'post',
        url: this.url + '/mission/',
        data: this.mission
      }).then((res) => {
        if (res.status === 200) {
          res = res.data
          alert('提交成功！')
          this.missionList.push({
            name: this.mission.name,
            ownerName: res.ownerName
          })
        } else alert('提交失败！请重新打开页面')
      }).catch((err) => {
        alert(err)
      })
      this.addMission = false
    },
    submit () {
      this.$axios({
        method: 'put',
        url: this.url + '/module/',
        data: {
          id: parseInt(sessionStorage.getItem('taskID')),
          state: parseInt(this.taskState),
          leaderID: this.task.leaderID,
          name: this.name,
          startTime: this.startTime,
          endTime: this.endTime,
          content: this.content,
          target: this.target
        }
      }).then((res) => {
        if (res.status === 200) alert('提交成功！')
        else alert('提交失败！请重新打开页面')
        this.okTask = false
        this.$router.push('/check')
      }).catch((err) => {
        alert(err)
      })
    },
    getProjectState (projectId) {
      console.log('pid' + projectId)
      axios.get(this.url + '/project/id/' + projectId)
        .then(this.getProjectStateSucc)
    },
    getProjectStateSucc (res) {
      if (res.status === 200) {
        res = res.data
        if (res.state === this.Run) this.taskState = this.Run
        else this.taskState = this.ProjectWaitForCheck
      }
    }
  },
  mounted () {
    this.getTask()
    this.getMissionList()
    this.getStudentList()
  }
}
</script>

<style lang="stylus" scoped>
  .taskName
    margin-left .2rem
  .row
    margin-top .6rem
    margin-bottom .6rem
  .taskIcon
    margin-right .3rem
    color #16b0ff
  .delIcon
    float right
    margin-right .5rem
  .projectIcon
    margin-right .2rem
  .addTaskIcon
    float: right
    font-size 19.9px
    margin-right .9rem
    margin-top .18rem
    color black
</style>
